<template>
  <div class="charts_container" ref="echartsPoly"></div>
</template>

<script>
export default {
  name: 'preHotTemper',
  data () {
    return {
      chartInstance: null,
      initOption: null
    }
  },
  created () {},
  mounted () {
    console.log(this.chartsData,'chartsData');
    this.initChart()
  },
  props: {
    chartsData: {
      type: Array,
      required: true
    }
  },
  watch: {
    chartsData: {
      handler (newVal, oldVal) {
        console.log('newValqqqqq', newVal, oldVal)
        if (oldVal !== newVal && oldVal !== undefined) {
          if (newVal.length !== 0) {
            this.realData = newVal
            this.timeWay(this.realData)
            var copys = JSON.parse(JSON.stringify(this.realData))
            copys[0].splice(0, 1)
            const seriesGroup = []
            copys[0].forEach(item => {
              seriesGroup.push({
                encode: {
                  // 将 "amount" 列映射到 X 轴。
                  x: 'createTime',
                  // 将 "product" 列映射到 Y 轴。
                  y: [item]
                },
                name: item,
                type: 'line',
                symbol: 'circle', // 节点样式
                // data: [120, 289, 250, 240, 290, 200],
                lineStyle: {
                  color: 'rgb(48, 200, 252)'
                },
                itemStyle: {
                  color: 'rgb(48, 200, 252)'
                }
              })
            })
            this.updateChart(seriesGroup, this.realData)
          }
        }
      },
      immediate: true
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', () => {
      this.chartInstance.resize()
    })
  },
  methods: {
    initChart () {
      this.initOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        legend: {
          top: '-1%',
          textStyle: {
            color: 'rgb(154, 170, 203)'
          },
          selectedMode: 'single', // 单选
          type: 'scroll',
          width: '90%'
        },
        grid: {
          bottom: '11%',
          right: '5%',
          top: '18%',
          left: '6%'
        },
        toolbox: {
          show: true,
          feature: {
            // dataZoom: {
            //   yAxisIndex: 'none' // 缩放功能
            // },
            // dataView: { readOnly: false }, // 数据表格功能
            // magicType: { type: ['line', 'bar'] }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisTick: { // 不显示轴刻度
            show: false
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgb(154, 170, 203)'
            }
          },
          axisLabel: {
            interval: 'auto',
            formatter: function (value) {
              let ret = '' // 拼接加\n返回的类目项
              var maxLength = 6 // 每行最多个数
              var valLength = value.length // x轴一个项的总数
              var rowN = Math.ceil(valLength / maxLength)
              if (rowN > 1) { // 如果大于5个字符
                for (let i = 0; i < rowN; i++) {
                  let temp = ''
                  temp = value.substring(i * maxLength, i * maxLength + maxLength) + '\n'
                  ret += temp
                }
                return ret
              } else {
                return value
              }
            },
            textStyle: {
              fontSize: 8
            }
          },
          // data: ['08:01', '08:02', '08:03', '08:04', '08:05', '08:06']
        },
        yAxis: [
          {
            name: '温度(℃)',
            nameTextStyle: {
              color: 'rgb(154, 170, 203)'
            },
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              color: 'rgb(154, 170, 203)'
            },
            axisTick: { // 不显示轴刻度
              show: false
            },
            min: 0,
            // max: 400, // 写死y轴范围
            splitLine: { // 属于y轴的是grid横线
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgb(255, 255, 255, 0.2)'
              }
            }
          }
        ],
        dataset: {
          source: []
        },
        series: []
      }
      this.chartInstance = this.$echarts.init(this.$refs.echartsPoly)
      // console.log('温度曲线initOption', this.initOption)
      this.chartInstance.setOption(this.initOption)
      this.echartsResize()
    },
    updateChart (seriesGroup, realData) {
      const dataOption = {
        series: seriesGroup,
        dataset: {
          source: realData // 数组
        }
      }
      console.log(dataOption,'dataOption');
      this.chartInstance.setOption(dataOption)
    },
    echartsResize () {
      window.addEventListener('resize', () => {
        this.chartInstance.resize()
      })
    },
    timeWay (arrBig) {
      for (var i = 1; i < arrBig.length; i++) {
        arrBig[i][0] = arrBig[i][0].substring(5, arrBig[i][0].length - 3)
      }
    }
  }
}
</script>

<style scoped>
.charts_container {
width: 100%;
height: 100%;
}
</style>
